<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="shared/css_js::header">
	<title>jQuery WeUI</title>
	<link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
</head>
<style>
	.demos-title {
		text-align: center;
		font-size: 34px;
		color: #3cc51f;
		font-weight: 400;
		margin: 0 15%;
	}
</style>
<body>


<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title"><font size="4"><b>请登录</b></font></h1>
</header>

<div class="mui-content">

	<h3 class="demos-title" style="margin-bottom:50px; margin-top:100px"></h3>
	<div class="weui-cells">
		<div class="weui-cell">
			<div class="weui-cell__hd">
                <label class="weui-label">账号:</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input class="weui-input" type="tel" id="username" name="username" placeholder="请输入账号" style="border: none;margin-bottom: 0px;padding: 0px"/>
			</div>
		</div>
		<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">密码:</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input class="weui-input" type="password" id="pwd" name="pwd" placeholder="请输入密码" style="border: none;margin-bottom: 0px;padding: 0px"/>
			</div>
		</div>
	<!--	<div class="weui-cell">
			<div class="weui-cell__hd">
				<label class="weui-label">验证码:</label>
			</div>
			<div class="weui-cell__bd weui-cell_primary">
				<input class="weui_input" type="certifycode" id="certifycode" name="certifycode" placeholder="请输入验证码" style="border: none;margin-bottom: 0px;width: 100%"/>
			</div>
			<div class="weui-cell__ft">
				<button type="button"  class="weui-vcode-btn" style="font-size: 25px" id="validate2" onclick="createCode()" >获取验证码</button>
			</div>
		</div>-->
	</div>
	<div class="weui-btn-area" style="margin-top:80px">
		<a class="weui-btn weui-cell_primary" type="button" style="background-color: #04be02;" onclick="login()">登录</a>
	</div>
	<div align="center" style="margin-left: 20px;margin-right: 10px;margin-top: 20px">
		<span style="color: grey">如需帮助，您可爱卡特官微在线联系客服寻求帮助</span>
	</div>
</div>
</body>
<!--<script th:inline="javascript">
    /*<![CDATA[*/
    /*验证码*/
    //设置一个全局的变量，便于保存验证码
    var code;
    function createCode(){
        //首先默认code为空字符串
        code = '';
        //设置长度，这里看需求，我这里设置了4
        var codeLength = 4;
        /*var codeV = document.getElementById('validate');*/
        //设置随机字符
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
        //循环codeLength 我设置的4就是循环4次
        for(var i = 0; i < codeLength; i++){
            //设置随机数范围,这设置为0 ~ 36
            var index = Math.floor(Math.random()*36);
            //字符串拼接 将每次随机的字符 进行拼接
            code +=random[index];
        }
        //将拼接好的字符串赋值给展示的Value
        $("#validate2").text(code);
    }


    //设置此处的原因是每次进入界面展示一个随机的验证码，不设置则为空
    window.onload = function (){
        createCode();
    }
    /*]]>*/
</script>-->
<script>
    /*点击提交*/
    function login() {
        var isflag=true;
        var username=$("#username").val();
        var pwd=$("#pwd").val();
     /*   var certifycode=$("#certifycode").val();
        var validate2=$("#validate2").text();*/
        var pattern = /^1[0-9]{10}$/;
        if (username==''||username==null) {
            $.toptip("请输入账号", 'error');
            document.getElementById("username").focus();
            isflag=false;
        }else if (pwd==''||pwd==null) {
            $.toptip("请输入密码", 'error');
            document.getElementById("pwd").focus();
            isflag=false;
        }/*else if(certifycode==null||certifycode==''){
            $.toptip("请输入验证码", 'error');
            document.getElementById("certifycode").focus();
            isflag=false;
		}else if(certifycode.toUpperCase()!=validate2){
            $.toptip("输入验证码不正确", 'error');
            createCode();
            $("#certifycode").val("");
            document.getElementById("certifycode").focus();
            isflag=false;
        }*/
        if(isflag){
            mui.get('/sale/logincheck',{username:username,pwd:pwd},function(data){
                if(data=="true"){
                    location.href="/sale/order";
                }else {
                    $.toptip("登录失败!用户名或密码错误");
                    $("#username").val("");
                    $("#pwd").val("");
                }
            });
		}
    }
</script>
</html>
